function ImagePreviewer(slideIndex, imageLoadedCallback, imgRemovedCallback, presentationManager) {
	
	this.slideIndex = slideIndex;
	this.fileInput = $("#"+PresentationSlideFieldIdsPrefixes.INPUT_FILE+slideIndex);
	this.img = $("#"+PresentationSlideFieldIdsPrefixes.IMG+slideIndex);
	this.imageLoadedCallback = imageLoadedCallback;
	this.imgSpan = $("#"+PresentationSlideFieldIdsPrefixes.IMG_SPAN+slideIndex);
	this.imgShrinkButton = $("#"+PresentationSlideFieldIdsPrefixes.IMG_SHRINK_BUTTON+slideIndex);
	this.imgGrowButton = $("#"+PresentationSlideFieldIdsPrefixes.IMG_GROW_BUTTON+slideIndex);
	this.imgRemovedCallback = imgRemovedCallback;
	this.presentationManager = presentationManager;
		
	this.initialResizeImageWidth = 800;
	this.userResizeInitialWidth = 450;
	this.resizeAmount = 50;
	
	ImagePreviewer.prototype.showImage = function() {
		var reader = new FileReader();
		var self = this;
		reader.onload = function (e) {        	
        	self.img.attr('src', e.target.result);
        	self.doInitialResize();
        	self.doUserResize(self.sign(self.userResizeInitialWidth - self.img.get(0).width));
        	self.doUserResize(self.sign(self.userResizeInitialWidth - self.img.get(0).width));
        	self.doUserResize(self.sign(self.userResizeInitialWidth - self.img.get(0).width));
//        	self.doUserResize(self.sign(self.userResizeInitialWidth - self.img.get(0).width));
//        	self.doUserResize(self.sign(self.userResizeInitialWidth - self.img.get(0).width));
//        	self.doUserResize(self.sign(self.userResizeInitialWidth - self.img.get(0).width));
//        	self.doUserResize(self.sign(self.userResizeInitialWidth - self.img.get(0).width));
//        	self.doUserResize(self.sign(self.userResizeInitialWidth - self.img.get(0).width));  
        	self.presentationManager.imgModifCallback(self.slideIndex,  self.img.get(0).src, self.img.get(0).width, self.img.get(0).height);
        	self.imgSpan.fadeIn(100, self.imageLoadedCallback);
        }

        var files = self.fileInput.prop("files");
        reader.readAsDataURL(files[0]); 
        
	};
	
	ImagePreviewer.prototype.removeImage = function() {
		if(!confirm("Sigur sterg poza asta?")) {
			return;
		}
		var self = this;
		this.imgSpan.fadeOut(100, function() {
			var imgParentSpan = self.img.parent();			
			var imgNew = $('<img id="'+self.img.attr("id")+'" src="#">');
			self.img.remove();
			imgNew.appendTo(imgParentSpan);
			self.img = imgNew;
			$("#fileForm"+self.slideIndex).get(0).reset();
			self.presentationManager.imgModifCallback(self.slideIndex, "REMOVED", 0, 0);
			self.imgRemovedCallback();
		});
	};
	
	ImagePreviewer.prototype.preload = function(imgUrl, imgWidth, imgHeight) {
		this.imgSpan.show();
		this.img.get(0).src = imgUrl;
		this.img.get(0).width = imgWidth;
		this.img.get(0).height = imgHeight;		
	};
	
	ImagePreviewer.prototype.doInitialResize = function() {
		if(this.img.get(0).width <= this.initialResizeImageWidth) {
			return;
		}
		var canvas = document.createElement('canvas');
	    var ctx = canvas.getContext('2d');

	    canvas.width = this.initialResizeImageWidth;
	    canvas.height = this.initialResizeImageWidth * this.img.get(0).height / this.img.get(0).width;

	    ctx.drawImage(this.img.get(0), 0, 0, canvas.width, canvas.height);

	    var imgUrl = canvas.toDataURL('image/jpeg', 0.94);
	    this.img.attr('src', imgUrl);
	};
	
	ImagePreviewer.prototype.doUserResize = function(direction) {		
		if(!this.supportsResize(direction)) {
			return;
		}
		var heightFactor = this.img.get(0).height / this.img.get(0).width;
		this.img.get(0).width = this.img.get(0).width + direction * this.resizeAmount;
		this.img.get(0).height = this.img.get(0).height + (direction * this.resizeAmount * heightFactor);
	};
	
	ImagePreviewer.prototype.supportsResize = function(direction) {
		var newWidth = this.img.get(0).width + direction * this.resizeAmount;
		return newWidth <= this.initialResizeImageWidth && newWidth > 0;
	};
	
	ImagePreviewer.prototype.sign = function(number) {
		return number?number<0?-1:1:0;
	};
		
	var self = this;
	this.fileInput.change(function(){
		self.showImage();
	});
	
	this.imgShrinkButton.click(function() {
		 self.doUserResize(-1); 
		 self.presentationManager.imgModifCallback(self.slideIndex,  self.img.get(0).src, self.img.get(0).width, self.img.get(0).height);
	});
	
	this.imgGrowButton.click(function() {
		 self.doUserResize(1); 
		 self.presentationManager.imgModifCallback(self.slideIndex,  self.img.get(0).src, self.img.get(0).width, self.img.get(0).height);
	});
};

function TextPreviewer(slideIndex, presentationManager) {
	
	this.slideIndex = slideIndex;
	this.presentationManager = presentationManager;
	
	this.textInput = $("#"+PresentationSlideFieldIdsPrefixes.TEXT_INPUT+slideIndex);
	this.textSpan = $("#"+PresentationSlideFieldIdsPrefixes.TEXT_SPAN+slideIndex);
		
	TextPreviewer.prototype.showText = function() {
		var self = this;
		this.textSpan.fadeIn(100,  function() {
		    $('html, body').animate({
		        scrollTop: self.textInput.offset().top - 750
		    }, 500);
		});
	};
	
	TextPreviewer.prototype.hideText = function() {
		this.textSpan.fadeOut(100);
	};
	
	TextPreviewer.prototype.preload = function(imgDesc) {
		this.textSpan.show();
		this.textInput.html(imgDesc);		
	}
	
	var self = this;
	this.textInput.on('change keyup paste', function() {
		self.presentationManager.imgDescModifCallback(self.slideIndex, self.textInput.val());
	});
};

function SlideManager(slideIndex, presentationManager) {
	
	this.textPreviewer = new TextPreviewer(slideIndex, presentationManager);
	this.inputFileFake = $("#"+PresentationSlideFieldIdsPrefixes.INPUT_FILE_FAKE+slideIndex);	
	this.inputFile = $("#"+PresentationSlideFieldIdsPrefixes.INPUT_FILE+slideIndex);	
	this.removeImageButton = $("#"+PresentationSlideFieldIdsPrefixes.IMG_REMOVE_BUTTON+slideIndex);
		
	SlideManager.prototype.preloadSlide = function(imgUrl, imgWidth, imgHeight, imgDesc) {		
		this.inputFileFake.hide();
		this.imagePreviewer.preload(imgUrl, imgWidth, imgHeight);	
		this.textPreviewer.preload(imgDesc);	
	};
	
	var self = this;
	SlideManager.prototype.showPreviewElements = function() {		
		self.textPreviewer.showText();		
	};
	
	var self = this;
	SlideManager.prototype.hidePreviewElements = function() {		
		self.textPreviewer.hideText();	
		self.inputFileFake.show();
	};
	
	this.imagePreviewer = new ImagePreviewer(slideIndex, this.showPreviewElements, this.hidePreviewElements, presentationManager);
	
	var self = this;
	this.inputFileFake.click(function(){
		self.inputFile.click();		
		self.inputFileFake.hide();		
    });
	
	this.removeImageButton.click(function(){
		self.imagePreviewer.removeImage();		
    });
};

